<script setup>
import { reactive, ref,defineExpose } from 'vue'
import UploadList from '@/components/app/uploadList.vue'
import { Plus } from '@element-plus/icons-vue'

const ruleFormRef = ref()
const TestRef = ref()
const getUploadImg = (val) => {
	ruleForm.url = val.url
}
const rules = reactive({
	content: [
		{
			required: true,
			message: '入群欢迎语不能为空',
			trigger: 'blur'
		}
	],
	code: [
		{
			required: true,
			message: '群聊二维码不能为空'
		}
	]
})
const ruleForm = reactive({
	promot: 1,
	content: '',
	url: '',
	num: 180,
	code: [],
	group_data:[
		{
			id:'',
			size:'',
			code:'',
			data:[]
		}
	]
})

const submitForm = async () => {
	if (!ruleFormRef.value) return
	await ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}
const indexsdaya=ref()
const chooseStaff = (index)=>{
	indexsdaya.value=index
	emits('getDialogueData')
}
const addchat = ()=>{
	var data = {
			id:'',
			size:'',
			code:''
	}
	ruleForm.group_data.push(data)
}
const emits = defineEmits(['getDialogueData'])
const tablevalue = (val)=>{
	console.log(val)
	ruleForm.group_data[indexsdaya.value].id=val.value.id
	ruleForm.group_data[indexsdaya.value].data=val.value
}
const shows = ()=>{
	return ruleForm
}	
defineExpose({
	tablevalue
})
</script>
<template>
	<div class="post-warp">
		<div class="post-left">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
				<el-form-item label="入群欢迎语：" prop="group_welcome">
					<el-input
						v-model="ruleForm.group_welcome"
						:autosize="{
							minRows: 8
						}"
						maxlength="600"
						placeholder="欢迎加入客户沟通群！有任何问题都可以在群内咨询小助理哦～"
						show-word-limit
						type="textarea"
						resize="none"
					/>
				</el-form-item>
				<el-form-item style="margin-top: -12px">
					<p class="switch-desc">
						提示：企业需在移动端群管理处选择已经创建好的欢迎语才可生效哦
						<a
							href="https://docs.qq.com/doc/p/55e30eb3cb6f1cbeb8b3c12a4ab6562d55a6692a?dver=2.1.27292865"
							class="btn-text"
							target="_blank"
							>查看详情</a
						>
					</p>
				</el-form-item>
				<div class="form-tip">
					<p style="flex: none">注意：</p>
					<p>
						1、注意群聊二维码有效期为7天，需要及时更换哦，以防客户进群失效哦～ <br />
						2、上传群二维码请 仔细核对 ，群聊二维码和群聊 对应错误 将导致 客户进群失效哦~<br />
						3、建议同一群聊不要应用于多个推广活动，可能导致群上限控制精度降低，出现客户无法正常加入群聊，或数据计算异常的情况
					</p>
				</div>
				<el-form-item label="群聊二维码：" prop="code" style="align-items: center; flex-wrap: wrap">
					<div class="blue-tip">
						<el-icon style="color: #1890ff; margin-right: 8px"><Bell /></el-icon>
						若群内添加了小助理机器人，请将【人数上限减1】，可能会导致客户进群失败
					</div>
				</el-form-item>
				<el-form-item style="margin-top: -18px">
					<div class="group-select-wrap">
						<div class="group-fission">
							<div class="group-fission-select" v-for="(item,index) in ruleForm.group_data">
								<div class="ul-content">
									<div class="group-item flex-s-b-c">
										<div class="group-item-left flex-c" >
											<div><span class="main-color"> * 群聊二维码{{ index + 1 }}: </span></div>
											<div class="flex-s-b-c middle-info-box">
												<div>
													<UploadList
														:uploadType="{ type: 'image' }"
														text="上传二维码"
														@getImg="getUploadImg($event, val,index)"
													/>
												</div>
												<div class="middle-right">
													<el-button @click="chooseStaff(index)" plain style="height: 48px; border-radius: 1px" :icon="Plus"
														>添加群聊</el-button
													>
													<div class="people-num-box">
														<span>群人数上限:</span>
														<el-input style="width: 58px" v-model="item.size" placeholder="" clearable />
													</div>
												</div>
											</div>
											<div v-if="ruleForm.group_data[index].data[0]">
												<el-tag
													class="mx-1"
													closable
													:disable-transitions="false"
													@close="handleClose(tag)"
												>
													{{ ruleForm.group_data[index].data[0].name }}
												</el-tag>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="add-group-select-btn" @click="addchat">
								<div class="select-icon">
									<el-icon><Plus /></el-icon>
								</div>
								<span>请选择群聊</span>
							</div>
						</div>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="post-right">
			<div class="preview-wrap">
				<img src="https://assets.weibanzhushou.com/web/we-work-webapp/phonePreview.ef61390b8fe4.jpg" class="bg" />
				<span class="title">扫码加入福利群</span>
				<div class="preview-content">
					<div class="launch">
						<img
							src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-default.af3289dacfcf.svg"
							class="avatar"
						/>
					</div>
					<div class="text-dialog" v-if="ruleForm.content">
						<span style="color: rgba(0, 0, 0, 0.85)">{{ ruleForm.content }}</span>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>
<style lang="scss" scoped>
a {
	text-decoration: none;
}
.btn-text {
	color: #1890ff;
	cursor: pointer;
}
.switch-desc {
	font-size: 13px;
	color: #8c8c8c;
	font-weight: 400;
}

.post-warp {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	.title {
		position: absolute;
		left: 29%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 71px;
		font-size: 11px;
		font-weight: 500;
		color: #000;
	}

	.post-left {
		width: 55%;
		.form-tip {
			display: flex;
			width: 100%;
			padding: 10px 14px;
			background: #fff7f0;
			border-radius: 2px;
			font-size: 13px;
			color: #bb5223;
			margin-top: 44px;
			margin-bottom: 24px;
		}
		.blue-tip {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 8px 0 8px 14px;
			font-size: 13px;
			background: #fff;
			border-radius: 2px;
			color: rgba(0, 0, 0, 0.65);
			background: #effaff;
		}
		.group-select-wrap {
			margin-top: 24px;
			.group-fission {
				border-radius: 2px;
				border: 1px solid #eee;
				padding: 16px 4px 16px 24px;
				width: 440px;
				background: #fbfbfb;
				.add-group-select-btn {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 16px;
					margin-left: 10px;
					padding: 0;
					color: rgba(0, 0, 0, 0.85);
					cursor: pointer;

					.select-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 24px;
						height: 24px;
						margin-right: 8px;
						font-size: 14px;
						border-radius: 50%;
						background-color: #f6fbff;
						color: rgba(0, 0, 0, 0.45);
					}
				}
				.group-fission-select {
					display: flex;
					flex-wrap: wrap;
					height: 100%;
					background: #fbfbfb;
					max-height: 378px;
					overflow-y: auto;

					.ul-content {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 0;
						.group-item {
							width: 310px;
							height: 214px;
							color: #000;
							.middle-info-box {
								height: 100%;
								background: #fff;
								padding: 12px;
								border: 1px solid hsla(0, 0%, 59.2%, 0.08);
								margin-top: 8px;
								:deep(.upload-icon) {
									width: 104px;
									height: 97px;
								}
							}
							.middle-right {
								display: -webkit-box;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								flex-direction: column;
								-webkit-box-pack: justify;
								justify-content: space-between;
								width: 144px;
								height: 99px;
							}
							.group-item-left {
								width: 310px;
								height: 214px;
								border-radius: 2px;
								padding: 8px 8px 0;
								.main-color {
									color: rgba(0, 0, 0, 0.65);
								}
							}
						}
						.flex-s-b-c {
							display: flex;
							-webkit-box-pack: justify;
							justify-content: space-between;
							-webkit-box-align: center;
							align-items: center;
						}
						.flex-c {
							display: flex;
							-webkit-box-orient: vertical;
							-webkit-box-direction: normal;
							flex-direction: column;
							justify-content: space-around;
						}
					}
				}
			}
		}
	}
	.post-right {
		width: 45%;
		height: 100%;
		margin-left: 25px;
		.preview-wrap {
			position: relative;
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 274px;
			}
			.preview-content {
				width: 225px;
				height: 345px;
				position: relative;
				z-index: 2;
				left: 24px;
				top: 98px;
				display: -webkit-box;
				display: flex;
				max-height: 345px;
				overflow-x: hidden;
				overflow-y: auto;
				.launch {
					display: flex;
					-webkit-box-align: start;
					align-items: flex-start;
					.avatar {
						width: 26px;
						height: 26px;
						margin-right: 8px;
						margin-left: 8px;
						border-radius: 2px;
					}
				}
				.text-dialog {
					max-width: 176px;
					background-color: #fff;
					word-break: break-all;
					position: relative;
					padding: 7px 10px;
					height: -webkit-fit-content;
					height: -moz-fit-content;
					height: fit-content;
					border-radius: 3px;
					font-size: 13px;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}
				.text-dialog:before {
					content: '';
					position: absolute;
					background-color: #fff;
					width: 8px;
					height: 8px;
					left: -2px;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}
		}
	}
}
</style>
